<template>
  <div class='order-page'>
    <div class="top-of-list">
      <div @click="gotoAddressList">
        <div class="have-address" v-if="showDefaultFlag">
          <img class="address-image" src="../../assets/defaultAddress.png"/>
          <div class="address-font">
            <div class="customer-info">
              <span class="customer-name">{{addressInfo.name}}</span>
              <span class="customer-phone">{{addressInfo.phone}}</span>
            </div>
            <div class="customer-address">
              {{addressInfo.address}}
            </div>
          </div>
          <div class="change-address">></div>
        </div>
        <div class="save-new-address" v-if="!showDefaultFlag">
          <img class="save-new-address-img" src="../../assets/addIcon.png"/>
          <span class="save-new-address-font">添加新地址</span>
        </div>
      </div>
      <img class="address-bottom" src="../../assets/tiao01.png">
    </div>
    <div class="order-info">
      <div v-for="(item,index) in productList" :key="index">
        <router-link :to="'/goods/detail?id=' + item.productId" class="goods-info">
          <img class="goods-item-image" :src="item.picUrl">
          <div class="goods-item-info">
            <div class="goods-name">{{item.productName}}</div>
            <div class="goods-norms" v-if="item.propertiesName !== null && item.propertiesName.length !== 0 && item.propertiesName !== ''">{{item.propertiesName}}</div>
            <div style="height: 44" v-if="!(item.propertiesName !== null && item.propertiesName.length !== 0 && item.propertiesName !== '')"></div>
            <div class="goods-info-bottom">
              <div class="goods-info-left">
                <div class="goods-real-fee">
                  {{item.exchangePoints}}
                  <div v-if="orderType === '0'">积分</div>
                </div>
              </div>
              <div class="goods-info-right">
                x{{item.productNumber}}
              </div>
            </div>
          </div>
        </router-link>
      </div>
    </div>
    <div class="delivery-type">
      <div class="delivery-type-title">配送方式</div>
      <div class="delivery-type-font" v-if="deliveryType === '0'">快递包邮</div>
    </div>
    <div class="order-remark">
      <div class="order-remark-title">订单备注</div>
      <input type="text" maxlength="30" class="captcha-input" bindinput="inputRemark" placeholder="请输入备注信息"/>
    </div>
    <div class="goods-sum">
      <span class="goods-sum-num">共{{orderNum}}件商品 小计</span>
      <div class="goods-sum-fee">{{totalMoney}}<span v-if="orderType === '0'">积分</span></div>
    </div>
    <div class="delivery-type">
      <div class="delivery-type-title">商品总额</div>
      <div class="delivery-type-font">{{totalMoney}}<span v-if="orderType === '0'">积分</span></div>
    </div>
    <div class="delivery-type">
      <div class="delivery-type-title">总运费</div>
      <div class="delivery-type-font" v-if="deliveryType === '0' || deliveryFee === null">￥0.00</div>
    </div>
    <div class="submit-order">
      <div class="order-fee-info">
        <span>合计</span>
        <span>{{submitFont}}</span>
      </div>
      <div class="submit" @click="submitOrder">提交订单</div>
    </div>
  </div>
</template>

<script>
import { API } from '../../config'
export default {
  data(){
    return{
      orderFrom: '0',   // 0 购物车 1 商品详情 2 拼团
      tpuId: '',
      showDefaultFlag: false,
      addressInfo: {
        addressId: '',
        name: '',
        phone: '',
        address: ''
      },
      orderInfo: [],
      productList: [],
      orderType: '0', // 0 积分 1 正常
      deliveryType: '0', // 0 包邮 1 快递
      deliveryFee: '',
      orderRemark: '',
      orderNum: 0,
      // goodsSumFee: '',
      totalMoney:'',
      submitFont: '',
      shoppingCartIds: [],
      productSkuId: '',
      ids: '',
      addressId: '',
      btnStatus: true,
      num: ''
    }
  },
  methods: {
    inputRemark(e){
      this.orderRemark = e.detail.value
      // console.log("评论内容："+this.orderRemark);
    },
    gotoAddressList () {
      var url = '/shippingAddress/addressListNoun'
      if (this.ids !== '') {
        url = url + '?ids=' + this.ids
      } else if (this.productSkuId !== '') {
        url = url + '?productSkuId=' + this.productSkuId
        if (this.num !== '') {
          url = url + '&num=' + this.num
        }
        if (this.orderFrom === '2') {
          url = url + '&type=team'
          if (this.tpuId !== '') {
            url = url + '&tpuid=' + this.tpuId
          }
        }
      }
      this.$router.push({
        url: url
      })
    },
    initFun(options) {

    },
    submitOrder () {
      let vm = this
      if (!this.btnStatus || this.addressInfo.addressId === '' || this.productList.length <= 0) {
        return
      }
      this.btnStatus = false
      var info = {}
      var productList = []
      info.addressId = this.addressInfo.addressId
      info.message = this.orderRemark
      this.productList.forEach(item => {
        productList.push({
          'productNumber': item.productNumber,
          'productSkuId': item.productSkuId,
          'shoppingCartId': this.orderFrom !== '0' ? null : item.shoppingCartId
        })
      })
      info.productList = productList
      info.tpuId = this.tpuId
      let accesstoken = this.getLocalStorage('accesstoken')
       vm.$axios.post(API + '/integralProduct/exchangeSubmit',info,{
          headers: {'accesstoken': accesstoken}//设置header信息
        }).then((response) => {
         let res = response.data
         if (res.code === 200) {
            this.$router.push({
              path: '/shopping/paySuccess3?orderId=' + res.data.orderId
            })
          } else if (res.code === 20006) {
            this.$message('商品已下架')
          } else if (res.code === 30006) {
            this.$message('库存不足')
          } else {
            this.$message('很抱歉，积分不足无法购买')
          }
          this.btnStatus = true
       })
    },
    init () {
      if (this.num === '' || this.num === undefined) {
        this.num = '1'
      }
      
      let accesstoken = this.getLocalStorage('accesstoken')
      if(this.orderFrom === '0'){
        this.$axios.post( API + '/shoppingcart/gosettle',{'shoppingCartIds': this.shoppingCartIds},{
          headers: {'accesstoken': accesstoken}//设置header信息
        }).then((res)=>{
          this.resDeal(res.data)   
        })
      }else if(this.orderFrom === '2'){
        this.$axios.post( API + '/product/openOrJoinGroupBuyActive',{'productSkuId': this.productSkuId, 'tpuId': this.tpuId},{
          headers: {'accesstoken': accesstoken}//设置header信息
        }).then((res)=>{
          this.resDeal(res.data)
        })
      }else{
        this.$axios.post( API + '/product/nowbuy?',{'productSkuId':this.productSkuId,'productNumber': parseInt(this.num)},{
          headers: {'accesstoken': accesstoken}//设置header信息
        }).then((res)=>{
          this.resDeal(res.data)
        })
      }
    },
    resDeal(res){
      if (res.code === 200) {
        // 暂时都是正常下单，不考虑积分
        this.deliveryFee = res.data.totalFreight
        this.totalMoney = res.data.totalMoney
        this.productList = res.data.productList
        if (this.orderFrom === '2') {
          this.tpuId = res.data.tpuId
        }
        if (this.addressId !== '') {
          this.$axios.get( API + '/receivinggoodsaddress/detail?id=' + this.addressId).then((resp)=>{
            if (resp.code === 200) {
              this.addressInfo.addressId = resp.data.id
              this.addressInfo.address = resp.data.provinceCityAreaName + resp.data.addressDetail
              this.addressInfo.name = resp.data.receivingGoodsName
              this.addressInfo.phone = resp.data.tel
              this.showDefaultFlag = this.addressInfo.addressId
            }
          })
        } else {
          this.addressInfo.address = res.data.address
          this.addressInfo.phone = res.data.tel
          this.addressInfo.name = res.data.receivingGoodsName
          this.addressInfo.addressId = res.data.addressId
          this.showDefaultFlag = this.addressInfo.addressId
        }
      } else if (res.code === 30007) {
        this.$message('只能购买一件秒杀商品')
        setTimeout(function () {
         this.$router.push({
            path: '/'
          })
        }, 1500)
        return
      } else if (res.code === 30006) {
        this.$message('库存不足')
        setTimeout(function () {
         this.$router.push({
            path: '/'
          })
        }, 1500)
        return
      }
      var fee = 0
      this.productList.forEach(item => {
        this.orderNum = this.orderNum + item.productNumber
      })
      fee = parseFloat(this.totalMoney) + parseFloat(this.deliveryFee)
      this.submitFont = fee +'积分'
    }
  },
  mounted() {
    let options = this.$route.query
    if (options.shoppingCarIds) {
      this.orderFrom = '0'
      var ids = options.shoppingCarIds
      this.ids = options.shoppingCarIds
      if (options.addressId) {
        this.addressId = options.addressId
      }
      var idList = ids.split(',')
      idList.forEach(item => {
        this.shoppingCartIds.push(parseInt(item))
      })
    } else if (options.type) {
      if (options.type === 'team') {
        this.orderFrom = '2'
        this.productSkuId = options.productSkuId
        this.tpuId = options.tpuid
        if (options.addressId) {
          this.addressId = options.addressId
        }
      }
    } else {
      this.orderFrom = '1'
      this.productSkuId = options.productSkuId
      if (options.num) {
        this.num = options.num
      }
      if (options.addressId) {
        this.addressId = options.addressId
      }
    }
    this.init()
  }
}
</script>

<style lang='less' scoped>
@import '../../css/common.less';
@import '../../css/order/order.less';
</style>
